<template>
	<view class="">
		<u-toast ref="uToast"></u-toast>
		<view class="header_cont">
			<view class="top" :style="'padding-top:'+titleHeight+'px'">
				我的
			</view>
			<view class="bg">
				<!-- <image src="../../static/image/mybg.png"></image> -->
			</view>
			<view class="info_header flex flex_bet flex_align">
				<view class="information flex flex_align" @click="getUserProfile">
					<img-icon :imgUrl="wxInfo.avatar" icons="icon-touxiang" :wHeight="120" :wWidth="120"
						:show="!wxInfo.avatar" radius="50%" :colorSize="120" :iconColor="{color: '#d2d6de'}"></img-icon>
					<view class="info_name mar_left">
						<view class="name">{{wxInfo.nickName ? wxInfo.nickName : '点击获取微信授权'}}</view>
						<view>{{mobile}}</view>
					</view>
				</view>
				<view class="setting" @click="goToUrlPage('/pages/personal/index')">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my1.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="main">
			<view class="header_search">
				<u-input placeholder="搜索" prefixIcon="search" shape="circle" fontSize="24rpx" v-model="searchKeyWord">
					<template slot="suffix">
						<u-button
							type="success"
							size="mini"
							class="search_btn"
							@click="search"
						>搜索</u-button>
					</template>
				</u-input>
				<view class="searchList" v-if="searchShow">
					<view class="search_item flex flex_align" v-for="(item,i) in searchList" :key="i" @click="goToUrlDetail(item.id)">
						<view class="iconfont icon-sousuo search_icon"></view>
						<view class="info">
							<view style="font-size: 30rpx;color: #000;">快递单号：<text style="color:#5995ff">{{item.express_number ? item.express_number : '暂无单号'}}</text></view>
							<view style="margin: 10rpx 0;">电话号码：{{item.user_phone}}</view>
							<view>寄修产品SN号：{{item.serial_number}}</view>
						</view>
					</view>
					<view class="no_data" v-if="noData">
						无数据
					</view>
				</view>
				
			</view>
			
			<!-- 	<view class="search mar_top flex flex_bet flex_align">
					<view class="box">
						<u-search v-model="value10" :show-action="false" borderColor="rgb(230, 230, 230)" bgColor="#fff">
						</u-search>
					</view>
					<view class="confirm flex flex_bet flex_align">
						<view class="btn green">搜 索</view>
						<view class="btn">全 部</view>
					</view>
				</view> -->
			
				<view class="mar_top" style="margin-right: 20rpx;margin-left: 20rpx;">
					<!-- <dispose></dispose> -->
					<view class="main_type">
								<view class="box" v-for="item in troubleList" :key="item.name" @click="goToRepairUrl(item.id)">
									<view class="box_img">
										<image :src="item.img" mode=""></image>
										 <u-badge shape="horn" type="error" :absolute="true" :value="item.total" customStyle="left:150rpx; top:0rpx;"></u-badge>
										<!-- <view class="hint">8</view> -->
									</view>
									<view class="text">{{item.name}}</view>
								</view>
							</view>
				</view>
			
				<view class="footer">
					<view class="box box_redius mar_top flex flex_align flex_bet" v-for="(item,index) in addressList"
						:key="item.name" @click="goToUrl(index)">
						<view class="flex flex_align">
							<image :src="item.img" mode=""></image>{{item.name}}
						</view>
						<view class="iconfont icon-xiangyoujiantou"></view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import{repairStatistics,repairList}from'@/api/repair.js'
	import imgIcon from '@/components/imgIcon.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			imgIcon
		},
		computed: {
			...mapState([
				'wxInfo', 'mobile'
			])
		},
		data() {
			return {
				addressList: [{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my12.png',
						name: '商品购买订单'
					},{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my8.png',
						name: '我的常用地址'
					}, {
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my11.png',
						name: '在线客服'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my10.png',
						name: '服务政策'
					}, {
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my9.png',
						name: '服务热线'
					}
				],
				titleHeight:0,
				troubleList: [
					{img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my7.png', name: '快递中', id: 1,total:0},
					{img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my2.png', name: '签收环节', id: 2,total:0},
					{img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my3.png', name: '复判环节', id: 3,total:0},
					{img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my4.png', name: '付款', id: 4,total:0},
					{img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my5.png', name: '维修中', id: 5,total:0},
					{img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/my6.png', name: '已寄回', id: 6,total:0},
				],
				searchShow:false,
				searchList:[],
				noData:false,
				flag:true,
				startSize:1,
				pageSize:10,
				type:'search',
				searchKeyWord:''
			}
		},
		onShow() {
			this.getRepairTotal()
		},
		onLoad() {
			// #ifdef MP-WEIXIN
					this.getHeight();
			// #endif
			this.getRepairTotal()
		},
		watch:{
			searchKeyWord(val){
				if(val==''){
					this.searchShow = false
					this.searchList = []
				}
			}
		},
		methods: {
			//请求寄修各模块总数
			getRepairTotal(){
				repairStatistics().then(res=>{
					this.troubleList[0].total = res.data.express
					this.troubleList[1].total = res.data.sign_for
					this.troubleList[2].total = res.data.retrial
					this.troubleList[3].total = res.data.paid
					this.troubleList[4].total = res.data.repair
					this.troubleList[5].total = res.data.return
				})
			},
			//获取胶囊高度
			getHeight(){
				let res = wx.getMenuButtonBoundingClientRect();
				this.titleHeight = res.top;
			},
			//寄修阶段模块跳转
			goToRepairUrl(id) {
				uni.navigateTo({
					url: '/pages/applicationRecord/index?type=' + id
				});
			},
			goToUrl(index) {
				console.log(index);
				let url = ''
				switch (index) {
					case 0:
						url = 'plugin-private://wx34345ae5855f892d/pages/orderList/orderList'
						break;
					case 1:
						url = '/pages/myAddress/index'
						break;
					case 2:
						this.$refs.uToast.show({
							message: '暂未开放',
							type: 'default',
							icon: false
						})
						return
						break;
					case 3:
						url = '/pages/policy/index'
						break;
					case 4:
						url = '/pages/servePhone/index'
						break;
				}
				uni.navigateTo({
					url: url
				});
			},
			//跳转页面
			goToUrlPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			//获取微信头像授权
			getUserProfile(val) {
				if (this.wxInfo.avatar && this.wxInfo.nickName) return
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						let {
							avatarUrl,
							nickName
						} = res.userInfo
						this.$store.commit('editWxinfo', res.userInfo)
						uni.setStorageSync("wxAvatar", avatarUrl)
						uni.setStorageSync("wxNickName", nickName)
					}
				})
			},
			//搜索
			search(){
				if(this.searchKeyWord=='')return
				if(!this.flag) return
				this.flag = false
				setTimeout(()=>{
					this.searchShow=true
					let params ={
						search:this.searchKeyWord,
						startSize:1,
						pageSize:10,
						type:'search'
					}
					repairList(params).then(res=>{
						this.noData = false
						this.searchList = res.data
						console.log(res);
					}).catch(err=>{
						this.noData = true
					})
					console.log(this.searchKeyWord);
					this.flag = true
				},1200)
			
			},
			goToUrlDetail(id) {
				uni.navigateTo({
					url: '/pages/applicationDetails/index?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header_cont{
		position: relative;
	}
	.top {
		line-height: 60rpx;
		font-size: 34rpx;
		margin-bottom: 40rpx;
		padding-left: 20rpx;
	}
	.bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		image{
			width: 100%;
			height: 300rpx;
		}
	}
	.info_header {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 20rpx;
		.information {
			image {
				height: 120rpx;
				width: 120rpx;
				border-radius: 50%;
			}
		
			.info_name {
				.name {
					font-size: 34rpx;
					line-height: 50rpx;
				}
			}
		}

		.setting {
			margin-top: -40rpx;
			image {
				width: 46rpx;
				height: 46rpx;
			}
		}
	}
	.header_search{
		position: relative;
		/deep/.u-input{
			border-color: red;
			background: #f8f8fa;
			padding: 4px !important;
			/deep/ .u-icon__icon{
				color: #dddddd;
			}
		}
		/deep/ .u-button{
			font-size: 13px;
			border-radius: 50px;
			width: none;
			color: #2d9bff;
			background: #fff;
			border:none;
			box-shadow: 0 0 5px 1px #ddd;
		}
	}
	.search {
		margin-top: 40rpx;

		.box {
			width: 60%;
		}

		.confirm {
			margin-left: 40rpx;
			flex: 1;

			.btn {
				background-color: #9c9c9c;
				padding: 19rpx 30rpx;
				color: #FFFFFF;
				border-radius: 40px;
				box-shadow: 2rpx 4rpx 8rpx hsl(220, 60%, 90%);
			}

			.green {
				background-color: #08dc25;
			}
		}
	}

	.footer {
		.box {
			image {
				height: 60rpx;
				width: 60rpx;
			}
		}
	}
	
	.main_type {
		display: grid;
		grid-template-columns: repeat(3, 33.33%);
		border-radius: 20rpx;
		padding: 30rpx 0;
		padding-top: 0;
		.box {
			text-align: center;
			margin: 30rpx 0 10rpx 0;
	
			image {
				height: 98rpx;
				width: 98rpx;
			}
			.box_img{
				position: relative;
			}
		}
	}
	.searchList{
		position: absolute;
    left: 2.5%;
    min-height: 200rpx;
    width: 95%;
    background-color: #fff;
    z-index: 99;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    box-shadow: 0px 8rpx 20rpx 6rpx #ddd;
		max-height: 700rpx;
		overflow-y: auto;
		.search_item{
			margin: 20rpx 20rpx;
			padding: 25rpx 0;
			border-bottom: 1px solid #fafafa;
			.search_icon{
				width: 15%;
				text-align: left;
				font-size: 65rpx;
				color: #ababab;
			}
			.info{
				font-size: 28rpx;
				color: #ababbb;
				letter-spacing: -1rpx;
			}
		}
	}
	.no_data{
		font-size: 32rpx;
    text-align: center;
    margin-top: 10%;
	}
</style>